﻿<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="renderer" content="webkit">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>族谱网 - 首页</title>
<link href="${ctx}/assets/assets/css/gloab.css" rel="stylesheet">
<link href=" assets/assets/css/index.css" rel="stylesheet">

<link href="${ctx}/assets/bootstrap-3.3.7-dist/css/bootstrap.min.css"
	rel="stylesheet">
<script src="${ctx}/assets/jquery/jquery2.2.4.min.js"></script>
<script src="${ctx}/assets/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

<link href="${ctx}/assets/fs002/fs_0.2.css" rel="stylesheet">
<link href="${ctx}/assets/fitness/all_fit.css" rel="stylesheet">
<link href="${ctx}/assets/fitness/index_fit.css" rel="stylesheet">
<style type="text/css">
.dropbtn {
	background: rgb(248, 119, 9);
	margin-left: 10px;
	color: white;
	padding: 10px 20px;
	font-size: 16px;
	border: none;
	cursor: pointer;
	border-top: 1px solid rgb(222, 208, 33);
	border-left: 1px solid rgb(222, 208, 33);
	border-right: 1px solid rgb(222, 208, 33);
	border-radius: 4px 4px 0 0;
	margin-top: 10px;
	/*margin-left: 10px;
    color: #fff;
    background: rgb(248,119,9);
    padding: 10px 20px;
    margin-top: 10px;
    border-top: 1px solid rgb(222,208,33);
    border-left: 1px solid rgb(222,208,33);
    border-right: 1px solid rgb(222,208,33);
    border-radius: 4px 4px 0 0;*/
}

.dropbtn:hover, .dropbtn:focus {
	background-color: rgb(268, 139, 9);
}

.dropdown {
	position: relative;
	display: inline-block;
}

.dropdown-content {
	display: none;
	position: absolute;
	background-color: #f9f9f9;
	min-width: 160px;
	overflow: auto;
	box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
	z-index: 1;
}

.dropdown-content a {
	color: black;
	padding: 12px 16px;
	text-decoration: none;
	display: block;
}

.dropdown a:hover {
	background-color: #f1f1f1
}

.show {
	display: block;
}
#v_container {
	height: 36px;
	float: left;
}
#v_container canvas{
	position: absolute;
	right: 8px;
}


.reg-box .part1, .reg-box .part2, .reg-box .part3 {
    padding-left: 81px;
}
</style>
<script>
	function jump() {
		window.location.href = "${ctx}/register";
	}
</script>
<script type="text/javascript">
	/* 点击按钮，下拉菜单在 显示/隐藏 之间切换 */
	function myFunction() {
		document.getElementById("myDropdown").classList.toggle("show");
	}

	// 点击下拉菜单意外区域隐藏
	window.onclick = function(event) {
		if (!event.target.matches('.dropbtn')) {

			var dropdowns = document.getElementsByClassName("dropdown-content");
			var i;
			for (i = 0; i < dropdowns.length; i++) {
				var openDropdown = dropdowns[i];
				if (openDropdown.classList.contains('show')) {
					openDropdown.classList.remove('show');
				}
			}
		}
	}
</script>
</head>
<body>
	<div class="container-fluid zp-topper">
		<div class="row">
			<div class="container">
				<img src="${ctx}/assets/img/logo.png"> 
			</div>
		</div>
	</div>


	<div class="navbar navbar-default">
		<div class="container">
			<a class="navbar-brand" href="#"></a>
			<div class="collapse navbar-collapse" id="topbar">
				<ul class="nav navbar-nav">
					<!-- <li class=""><a href="${ctx}/">首页</a></li> -->
					<c:if test="${not empty loginUser}">
						<li class=""><a href="${ctx}/index">家学渊源</a></li>
						<li class=""><a href="#">我的博客</a></li>
						<li class=""><a href="#">保存中心</a></li>
					</c:if>
          <!-- <li class=""><a href="${ctx}/list">百家姓</a></li>
          <li class=""><a href="${ctx}/lyan">留言板</a></li> -->
				<!--  <li class=""><a>搜索查询</a></li> -->
			</ul>

				<ul class="nav navbar-nav navbar-right">
					<c:choose>
						<c:when test="${empty loginUser}">
							<li class=""><a href="${ctx}/sign">登陆账号</a></li>
						</c:when>
						<c:otherwise>
							<div class="dropdown">
								<button onclick="myFunction()" class="dropbtn">${loginUser.name }</button>
								<div id="myDropdown" class="dropdown-content">
									 <a href="#">i${loginUser.id }</a>
									 <a href="${ctx }/logout">退出</a>
								
								</div>
							</div>
						</c:otherwise>
					</c:choose>
				</ul>
			</div>
		</div>
	</div>

	<div class="container">
		<div class="row">
			<div class="col-md-12">
				<div class="panel panel-warning"
					style="padding-bottom: 30px; min-height: 720px;">
					<div class="panel-heading">登陆界面</div>
					<div class="panel-body" style="padding-left: 0px;">
						
							<div class="col-md-3"></div>
							<div class="col-md-6">
								<div class="box box-success">
								<!--	<div class="box-header with-border">
										<h3 class="box-title text-center">登陆账号</h3>
									</div> -->
									<!-- /.box-header -->
									<!-- form start -->
									<form class="form-horizontal" action="${ctx }/login"
										method="post">
										<div class=""
											style="width: 100%; text-align: center; padding-top: 20px;">
											<img src="${ctx}/assets/img/logo.png"
												style="max-width: 500px;">
										</div>
										<hr>
<div class="reg-box" id="verifyCheck" style="margin-top: 20px;  ">
											<div class="part1">
												<div class="item col-xs-12">
													<span class="intelligent-label f-fl"><b
														class="ftx04">*</b>用户名：</span>
													<div class="f-fl item-ifo">
														<input type="text" maxlength="20" id="username" name="name"
															class="txt03 f-r3 required" tabindex="1"
															></span>
													
													</div>
												</div>

												<div class="item col-xs-12">
													<span class="intelligent-label f-fl"><b
														class="ftx04">*</b>密码：</span>
													<div class="f-fl item-ifo">
														<input type="password" id="password" name="pwd"
															maxlength="20" class="txt03 f-r3 required" tabindex="3"
															 />
												
													</div>
												</div>
												<div class="item col-xs-12">
													<span class="intelligent-label f-fl"><b
														class="ftx04">*</b>验证码：
													</span>
													<div class="f-fl item-ifo">
														<input style="height: 36px;border: 1px solid #cccccc;padding: 0 10px;" type="text" id="code_input" value="" placeholder="请输入验证码"/>
														<div id="v_container"></div>
													</div>
												</div>
												<!-- /.box-body -->
												<div class="box-footer">
													<button style="margin-top: 20px; margin-left: 35px;"
														type="button" class="btn btn-default"
														onclick="javascrtpt:jump()">注册账户</button>


													<button style="margin-top: 20px; margin-right: 115px;"
														type="button" class="btn btn-warning pull-right"
														style="min-width: 220px;" onclick="login('${ctx }/index')">登录</button>
												</div>
									</form>
								</div>
							</div>
							<div class="col-md-3"></div>
						</div>
					</div>
				</div>
			</div>

		</div>


	<div class="container-fluid"
		style="background: #fff; padding-top: 10px;">
		<div class="container">
			<div id="footer" style="margin-bottom: 20px;">
				<ul id="copyright" style="margin-left: 0px; line-height: 130%;">

					<div style="width: 300px; margin: 0 auto; padding: 20px 0;">
						<a target="_blank"
							# style="display: inline-block; text-decoration: none; height: 20px; line-height: 20px;"><p
								style="float: left; height: 20px; line-height: 20px; margin: 0px 0px 0px 5px; color: #939393;">粤公网安备
								43018102000107号</p></a>
					</div>
			</div>
		</div>
	</div>
<script src="${ctx}/assets/js/gVerify.js"></script>
<script type="text/javascript">
	window.onload = function () {
		var verifyCode = new GVerify("v_container");
    window.verifyCode = verifyCode;
	}
	function login () {
		var username = document.getElementById('username');
		var password = document.getElementById('password');
		if (username.value === '') {
			alert("请输入用户名~")
		} else {
			if (password.value === '') {
				alert("请输入密码~")
			} else {
    		var res = window.verifyCode.validate(document.getElementById("code_input").value);
				if (res) {
	      	loginfuc();
				} else {
					alert("验证码错误~")
				}
			}
		}
		function loginfuc(lUrl) {
			$.ajax({
				url : '${ctx}/api/login',
				type : 'post',
				dataType : 'json',
				data : {
					username: username.value,
					password: password.value
				},
				timeout : 1000,
				success : function(json) {
					if (json.code == 200) {
						window.parent.location.href = "${ctx }/index"
					} else {
						alert(json.message);
					}
				},
				fail : function(err) {
					alert(arr);
				}
			})
		}
	}
</script>
</body>
</html>